<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            background-color="white"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            :default-active="active"
            unique-opened collapse-transition router >
            <template v-for="item in menuAry">
                <el-menu-item :index="item.path" :key="item.path">
                    <div class="flexWrap">
                        <i :class="'sidebar-icon iconfont ' + item.meta.icon" />
                        <span slot="title" class="sidebar-title">{{ item.meta.title }}</span>
                    </div>
                </el-menu-item>
            </template>
        </el-menu>

        <el-popover class="me me-style"
            placement="top-start"
            title=""
            width="80"
            trigger="click" >
            <button class="me-pop-btn" type="button" @click="toShowModify">修改密码</button>
            <button class="me-pop-btn" type="button" @click="toLogout">退出登录</button>

            <button slot="reference" class="me-style" type="button">{{me}}</button>
        </el-popover>


        <!--修改资料-->
        <el-dialog :visible.sync="modify.show" width="550px" append-to-body border :show-title=false :show-close=false>
            <el-form :model="modify" ref="ruleForm" label-width="80px" class="ms-content">
                <el-form-item prop="name" label="姓名：">
                    <el-input size="mini" v-model="modify.name" placeholder="姓名" />
                </el-form-item>
                <el-form-item prop="password" label="密码：">
                    <el-input size="mini" type="password" placeholder="空表示保持原密码不变" v-model="modify.password" />
                </el-form-item>
                <div class="tCenter mt-40">
                    <el-button type="primary" @click="toModify">修改</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import bus from './bus';
    import md5 from "@/utils/md5";
    import {logout} from "@/utils/auth";
    export default {
        data() {
            return {
                activeMenu:0,
                active: "",
                menuAry: [],

                me: "",
                modify: {show:false}
            }
        },
        watch: {
            $route() {
                this.active = this.$route.name;
            }
        },
        created() {
            this.menuChanged()
            bus.$on("account_changed", () => {
                this.menuChanged()
            })

            let info = this.auth.getAccount()
            if (info) {
                this.me = info.name.substr(0,1)
            }
        },
        methods: {
            menuChanged() {
                if (!this.auth) {return}
                let account = this.auth.getAccount()

                this.active = this.$route.name;

                let ary = account.menus;
                if (!ary || ary.length === 0) {return}

                this.menuAry = []
                for (let i = 0; i < ary.length; i++) {
                    if (!ary[i].hidden) {
                        let one = {...ary[i]}
                        this.menuAry.push(one)
                    }
                }
                this.$forceUpdate();
            },

            toShowModify() {
                this.modify.show = true
                let info = this.auth.getAccount()
                if (info) {
                    this.modify.name = info.name
                    this.modify.id = info.id
                }
            },
            toLogout() {
                this.auth.logout()
                this.$message.success({message:"退出登录成功！", duration:1000});
                setTimeout(() => {
                    this.$router.replace({path:"login"}).catch(()=>{})
                },1200)
            },
            toModify() {
                let password = ""
                if (this.modify.password) {
                    if (this.modify.password.length < 5) {this.$message.error("密码不能小于5位~");return}
                    password = md5.hex_md5("hjk0tpk*#en#&" + this.modify.password)
                }

                this.request.post({
                    url: "user.modify", data: {id:this.modify.id, name:this.modify.name, password:password}
                }).then(res => {
                    this.$message.success({message:"修改成功！", duration:1000});
                    this.modify.password = ""
                    this.modify.show = false
                    this.$forceUpdate()
                },res => {
                    this.$message.error(res.msg || "修改失败~");
                })
            }
        }
    }

</script>

<style scoped>
@import "../../style/iconfont/iconfont.css";

.sidebar {
    display: block; position: absolute;
    left: 0; top: 0; bottom: 0; height: 100vh;
    overflow-y: scroll;
    padding-top: 20px;
    border-right: 1px solid #f0f0f0;
}
.el-menu {border-right: 0 !important;}
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar-el-menu:not(.el-menu--collapse) { width: 80px; }
.sidebar > ul { height: 100%;}

.el-menu-item, .el-submenu__title {height: 80px; line-height: 25px !important; text-align: center}

.el-menu-item:focus, .el-menu-item:hover {background-color: white !important;}

/deep/ .el-submenu__icon-arrow {margin-top: -4px !important}
/deep/ .el-submenu__icon-arrow {margin-top: -4px !important}

.sidebar-icon {
    width: 100%; margin-top: 15px; font-size: 20px !important;

}
.sidebar-title {
    width: 100%; line-height: 25px; font-size: 12px;
}

.me {
    position: absolute; left: 22px; bottom: 40px; width: 35px; height: 35px;
}
.me-style {
    border-radius: 50%; background-color: #2d8cf0;
    font-size: 18px; line-height: 35px; text-align: center; color: white; font-weight: bold;
    border-width:0
}
.me-pop-btn {
    width: 100%;
    font-size: 14px; line-height: 35px; text-align: center;  background-color: white;
    border-width:0
}

</style>
